<script src="../asynx.js"></script>
<script src="../dom/dom.js"></script>
<script src="../impl/array.js"></script>
<script src="../impl/util.js"></script>
<script src="../impl/cookie.js"></script>
<script src="../impl/ajax.js"></script>
<script src="../impl/lang.js"></script>
<script src="../dom/xpath.js"></script>
<script src="../dom/selector.js"></script>
<script src="../event/event.js"></script>

<script src="../plugins/drag/drag.js"></script>
<script src="../plugins/animation/anim.js"></script>
<script src="../plugins/datalist/datalist.js"></script>
<script src="../plugins/autocomplete/autocomplete.js"></script>
<script src="../plugins/windows/windows.js"></script>

<style>
	
	.box {
		background-color: #E8EEF7;
		width: 10px;
		height: 10px;
		border: 4px #C3D9FF solid;
		z-index: 9;
	}
	
</style>

<h1>asynx animation</h1>

<div id="log" class="a">Log<br></div>
<button id="fire">maximizar</button>
<div id="anim1" class="box">
	<button id="fire2">minimizar</button>
</div>


<script>
	
	asynx('anim1').css({
		
		filter: "sdfsd"
		
	});
	
	var x = asynx('anim1').css("left");
	var y = asynx('anim1').css("top");
	
	var overlay = new asynx.windows.overlay({
		color: '#000',
		alpha: 80,
		closeOnClick: false,
		
		
		onLoad: function() {
			
			asynx('anim1').css({zIndex:99});
			asynx.anim.move('anim1', { to: 300, duration:10, equation: 'strongIn' }, "y");
			asynx.anim.move('anim1', { to: 300, duration:10, equation: 'strongIn' }, "x");
			asynx.anim.fade('anim1', { from: 0, to: 100 , duration:25, equation: 'strongOut' });
			
			twWidth = new asynx.anim.tween("anim1", asynx('anim1').css('width'), 300, 10, asynx.anim.easing.strong.In);
			twHeight = new asynx.anim.tween("anim1", asynx('anim1').css('height'), 300, 10, asynx.anim.easing.strong.In);
		
		
			twWidth.onTweenUpdate = function(el, pos) {
				el.css({ width: pos });
			}
			
			twHeight.onTweenUpdate = function(el, pos) {
				el.css({ height: pos });
			}
			
			twHeight.onTweenEnd = function() {
			}
			
			
		}
	});
	
	
	var d = new asynx.drag('anim1');
	
	asynx('fire').click(function() {
		overlay.show();
	});
	
	
	asynx('fire2').mousedown(function() {
		
		
		asynx.anim.move('anim1', { to: y, duration:15, equation: 'strongIn' }, "y");
		asynx.anim.move('anim1', { to: x, duration:15, equation: 'strongIn' }, "x");
		
		twWidth = new asynx.anim.tween("anim1", 300, 10, 15, asynx.anim.easing.strong.In);
		twHeight = new asynx.anim.tween("anim1", 300, 10, 15, asynx.anim.easing.strong.In);
	
	
		twWidth.onTweenUpdate = function(el, pos) {
			el.css({ width: pos });
		}
		
		twHeight.onTweenUpdate = function(el, pos) {
			el.css({ height: pos });
		}
		
		twHeight.onTweenEnd = function() {
			overlay.hide();
		}
		
	});
</script>